<template>
  <div class="son">
    儿子
    <div>
<!--      作用域插槽-->
      <slot :games="games"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {reactive} from "vue";

  const games = reactive([
    {name: '你好'},
    {name: '你不好'},
    {name: '你很好'}
  ])
</script>

<style scoped>
.son {
  background-color: lightskyblue;
  margin: auto;
  width: 80%;
  height: 90%;
}
</style>

<script lang="ts">
export default {
  name: "Game.vue"
}
</script>